<template>
  <!-- 搜索栏 -->
  <div>
    <el-input class="search" placeholder="请输入内容" prefix-icon="el-icon-search" v-model.trim="searchText">
    </el-input>
    <el-button class="searchBtn" type="primary" @click="searchUser">搜索</el-button>
    <el-button class="addUser" type="primary" @click="dialogFormVisible = true">新增用户</el-button>
    <!-- 表格 -->
    <el-table class="userTable" style="width: 100%" :data="userList">
      <el-table-column label="编号" prop="number" type="index" align="center">
      </el-table-column>
      <el-table-column label="姓名" prop="name" align="center">
      </el-table-column>
      <el-table-column label="邮箱" prop="email" align="center">
      </el-table-column>
      <el-table-column label="电话" prop="phone" align="center">
      </el-table-column>
      <el-table-column label="角色" prop="user" align="center">
      </el-table-column>
      <el-table-column label="状态" prop="state" align="center">
        <!-- 这里使用作用域传参  -->
        <template slot-scope="scope">
          <el-switch disabled :value="scope.row.state" :active-value="1" :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="openChange(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteUser(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination layout="prev, pager, next,jumper,total,slot,sizes" small background :total="total"
      @current-change="pageChange" @size-change="sizeChange">
    </el-pagination>
    <!--修改功能的抽屉 -->
    <el-drawer title="修改当前用户信息" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <change-user :fromList="fromList" @changeSub="onSubmit" :handle="handleClose"></change-user>
    </el-drawer>
    <!-- 新增功能 -->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <user-add @addUser="addUser" :closeAdd="()=>{
        dialogFormVisible=false
      } "></user-add>
    </el-dialog>
  </div>
</template>

<script>
import { getUserList, deleteUser, changeUser, userAdd } from '@/api'
import ChangeUser from './component/changeUser.vue'
import UserAdd from './component/userAdd.vue'
export default {
  name: 'userList',
  data() {
    return {
      dialogVisible: false,
      page: 1,
      pageSize: 10,
      total: 0,
      searchText: '',
      userList: [],
      drawer: false,
      direction: 'rtl',
      fromList: null,
      dialogFormVisible: false
    }
  },
  methods: {
    getUserList(params) {
      getUserList(params).then(res => {
        if (res.data.code == 200) {
          this.userList = res.data.data
          this.total = res.data.total
        }
      })
    },
    // 搜索
    searchUser() {
      if (this.searchText !== '') {
        this.getUserList({
          name: this.searchText
        })
      }
      this.searchText = ''
    },
    // 页码改变了
    pageChange(currentPage) {
      this.page = currentPage
      // 发送请求返回显示的多少数量的
      this.getUserList({
        page: currentPage,
        pageSize: this.pageSize
      })
    },
    // 每一的数量发生改变
    sizeChange(size) {
      this.pageSize = size
      this.getUserList({
        page: this.page,
        pageSize: size
      })
    },
    // 删除当前
    deleteUser(UserId) {
      // 发送请求
      this.$confirm('是否删除此用户?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        deleteUser(UserId).then(() => {
          this.getUserList({
            page: this.page,
            pageSize: this.pageSize
          })
        })
      })
    },
    // 打开修改的抽屉页面
    openChange(from) {
      this.fromList = {
        ...from
      }
      this.drawer = true
    },
    // 是否关闭修改抽屉
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.drawer = false
        })
        .catch(_ => { })
    },
    // 提交更改
    onSubmit(from) {
      changeUser(from).then(res => {
        this.$message({
          type: 'success',
          message: res.data.msg,
          duration: 1000,
          onClose: () => {
            this.$router.go(0)
          }
        })
      })
    },
    // 提交新增角色
    addUser(addFrom) {
      console.log(addFrom)
      userAdd(addFrom).then(res => {
        this.$message({
          type: 'success',
          message: res.data.msg,
          duration: 1000,
          onClose: () => {
            this.$router.go(0)
          }
        })
      })
    }
  },

  created() {
    this.getUserList()
  },
  // 引入组件
  components: {
    ChangeUser,
    UserAdd
  }
}
</script>

<style lang="scss" scoped>
.search {
  width: 400px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.userTable {
  height: 500px;
  overflow: auto;
  margin-bottom: 10px;
}

.addUser {
  float: right;
}
</style>
